<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>分类筛选器 | Vue Studio</title>
    <meta name="description" content="vue3 component、directive and template">
    <meta name="generator" content="VitePress v1.3.3">
    <link rel="preload stylesheet" href="/vue-desktop-docs/assets/style.BMxc4X2o.css" as="style">
    
    <script type="module" src="/vue-desktop-docs/assets/app.JbIU71ct.js"></script>
    <link rel="preload" href="/vue-desktop-docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/chunks/theme.BjUYIGhO.js">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/chunks/framework.C6Mn0AED.js">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/chunks/vmp_components.B7eH0t6-.js">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/components_filter.md.C3ZW7Bb0.lean.js">
    <link rel="icon" href="">
    <meta name="viewport" content="width=device-width,height=device-height, maximum-scale=1.0,minimum-scale=1.0">
    <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?119b5519877c96ec2bac58dea8acfafa";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-ff741247><!--[--><!--]--><!--[--><span tabindex="-1" data-v-d317c710></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-d317c710> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ff741247 data-v-d496a4c4><div class="VPNavBar has-sidebar top" data-v-d496a4c4 data-v-dbdf4b99><div class="wrapper" data-v-dbdf4b99><div class="container" data-v-dbdf4b99><div class="title" data-v-dbdf4b99><div class="VPNavBarTitle has-sidebar" data-v-dbdf4b99 data-v-733ea456><a class="title" href="/vue-desktop-docs/" data-v-733ea456><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-desktop-docs/logo.svg" alt data-v-fe9b4f1c><!--]--><span data-v-733ea456>Vue Studio</span><!--[--><!--]--></a></div></div><div class="content" data-v-dbdf4b99><div class="content-body" data-v-dbdf4b99><!--[--><!--]--><div class="VPNavBarSearch search" data-v-dbdf4b99><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-dbdf4b99 data-v-aaed27d4><span id="main-nav-aria-label" class="visually-hidden" data-v-aaed27d4> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/guide/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/components/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>组件</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/directives/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>指令</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/utils/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>utils</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-dbdf4b99 data-v-866269b0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-866269b0 data-v-45042928 data-v-e2492e27><span class="check" data-v-e2492e27><span class="icon" data-v-e2492e27><!--[--><span class="vpi-sun sun" data-v-45042928></span><span class="vpi-moon moon" data-v-45042928></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-dbdf4b99 data-v-9375ef87 data-v-adb166d8><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-adb166d8><span class="vpi-more-horizontal icon" data-v-adb166d8></span></button><div class="menu" data-v-adb166d8><div class="VPMenu" data-v-adb166d8 data-v-23278366><!----><!--[--><!--[--><!----><div class="group" data-v-9375ef87><div class="item appearance" data-v-9375ef87><p class="label" data-v-9375ef87>Appearance</p><div class="appearance-action" data-v-9375ef87><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-9375ef87 data-v-45042928 data-v-e2492e27><span class="check" data-v-e2492e27><span class="icon" data-v-e2492e27><!--[--><span class="vpi-sun sun" data-v-45042928></span><span class="vpi-moon moon" data-v-45042928></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-dbdf4b99 data-v-df3472bb><span class="container" data-v-df3472bb><span class="top" data-v-df3472bb></span><span class="middle" data-v-df3472bb></span><span class="bottom" data-v-df3472bb></span></span></button></div></div></div></div><div class="divider" data-v-dbdf4b99><div class="divider-line" data-v-dbdf4b99></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-ff741247 data-v-a9a790fc><div class="container" data-v-a9a790fc><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a9a790fc><span class="vpi-align-left menu-icon" data-v-a9a790fc></span><span class="menu-text" data-v-a9a790fc>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a9a790fc data-v-2d8f0263><button data-v-2d8f0263>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-ff741247 data-v-12f3e4fe><div class="curtain" data-v-12f3e4fe></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-12f3e4fe><span class="visually-hidden" id="sidebar-aria-label" data-v-12f3e4fe> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-f5581e34><section class="VPSidebarItem level-0 has-active" data-v-f5581e34 data-v-362a204f><!----><div class="items" data-v-362a204f><!--[--><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/index.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/grid/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Grid - 网格</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/query.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Query - 查询器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/table/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Table - 表格</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/table-select/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>TableSelect - 表格选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/tree.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Tree - 树</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/trend.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Trend - 趋势</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/filter.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Filter - 分类筛选器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/flow.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Flow - 流程图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/dot/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Dot - 圆点</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/wizard.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Wizard - 场景向导</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/upload.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Upload - 附件上传（开发中）</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-ff741247 data-v-129d407d><div class="VPDoc has-sidebar has-aside" data-v-129d407d data-v-beb5ee4a><!--[--><!--]--><div class="container" data-v-beb5ee4a><div class="aside" data-v-beb5ee4a><div class="aside-curtain" data-v-beb5ee4a></div><div class="aside-container" data-v-beb5ee4a><div class="aside-content" data-v-beb5ee4a><div class="VPDocAside" data-v-beb5ee4a data-v-1850f0ea><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-1850f0ea data-v-7f16107f><div class="content" data-v-7f16107f><div class="outline-marker" data-v-7f16107f></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-7f16107f>On this page</div><ul class="VPDocOutlineItem root" data-v-7f16107f data-v-49ce05e3><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-1850f0ea></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-beb5ee4a><div class="content-container" data-v-beb5ee4a><!--[--><!--]--><main class="main" data-v-beb5ee4a><div style="position:relative;" class="vp-doc _vue-desktop-docs_components_filter" data-v-beb5ee4a><div><h1 id="分类筛选器" tabindex="-1">分类筛选器 <a class="header-anchor" href="#分类筛选器" aria-label="Permalink to &quot;分类筛选器&quot;">​</a></h1><h2 id="简介" tabindex="-1">简介 <a class="header-anchor" href="#简介" aria-label="Permalink to &quot;简介&quot;">​</a></h2><p>效果与<a href="./table/#查询表格-必填校验">vs-table</a>的查询效果一致。功能如下：</p><ul><li>支持<code>element-plus</code>表单元素、以及<code>vs-table-select</code></li><li>支持通过<code>search.render</code>自定义搜索项</li><li>响应式布局</li></ul><h2 id="样例" tabindex="-1">样例 <a class="header-anchor" href="#样例" aria-label="Permalink to &quot;样例&quot;">​</a></h2><h3 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h3><p><code>default-values</code>是一个对象，表示当前默认值。对象中的key与<a href="#selectdataprops">SelectDataProps</a>[&#39;key&#39;]对应，多选时value是数组</p><div class="mdp-demo"><div class="mdp-demo__preview"><!--[--><!--[--><div class="vs-filter"><!--[--><div class="vs-filter-group"><div class="vs-filter-group-title"><span>单选 ：</span></div><!----><div class="el-scrollbar"><div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style=""><div class="el-scrollbar__view" style=""><!--[--><div class="vs-filter-content"><!--[--><div class="vs-filter-item"><!--[--><!----><span>全部</span><!--]--></div><div class="vs-filter-item active"><!--[--><i class="el-icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M432 928a48 48 0 1 1 0-96 48 48 0 0 1 0 96m320 0a48 48 0 1 1 0-96 48 48 0 0 1 0 96M96 128a32 32 0 0 1 0-64h160a32 32 0 0 1 31.36 25.728L320.64 256H928a32 32 0 0 1 31.296 38.72l-96 448A32 32 0 0 1 832 768H384a32 32 0 0 1-31.36-25.728L229.76 128zm314.24 576h395.904l82.304-384H333.44l76.8 384z"></path></svg><!--]--></i><span>已下单</span><!--]--></div><div class="vs-filter-item"><!--[--><i class="el-icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M128.896 736H96a32 32 0 0 1-32-32V224a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32v96h164.544a32 32 0 0 1 31.616 27.136l54.144 352A32 32 0 0 1 922.688 736h-91.52a144 144 0 1 1-286.272 0H415.104a144 144 0 1 1-286.272 0zm23.36-64a143.872 143.872 0 0 1 239.488 0H568.32c17.088-25.6 42.24-45.376 71.744-55.808V256H128v416zm655.488 0h77.632l-19.648-128H704v64.896A144 144 0 0 1 807.744 672m48.128-192-14.72-96H704v96h151.872M688 832a80 80 0 1 0 0-160 80 80 0 0 0 0 160m-416 0a80 80 0 1 0 0-160 80 80 0 0 0 0 160"></path></svg><!--]--></i><span>已发货</span><!--]--></div><div class="vs-filter-item"><!--[--><i class="el-icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"></path><path fill="currentColor" d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path></svg><!--]--></i><span>已签收</span><!--]--></div><div class="vs-filter-item"><!--[--><i class="el-icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M640 608h-64V416h64zm0 160v160a32 32 0 0 1-32 32H416a32 32 0 0 1-32-32V768h64v128h128V768zM384 608V416h64v192zm256-352h-64V128H448v128h-64V96a32 32 0 0 1 32-32h192a32 32 0 0 1 32 32z"></path><path fill="currentColor" d="m220.8 256-71.232 80 71.168 80H768V256H220.8zm-14.4-64H800a32 32 0 0 1 32 32v224a32 32 0 0 1-32 32H206.4a32 32 0 0 1-23.936-10.752l-99.584-112a32 32 0 0 1 0-42.496l99.584-112A32 32 0 0 1 206.4 192m678.784 496-71.104 80H266.816V608h547.2l71.168 80zm-56.768-144H234.88a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h593.6a32 32 0 0 0 23.936-10.752l99.584-112a32 32 0 0 0 0-42.496l-99.584-112A32 32 0 0 0 828.48 544z"></path></svg><!--]--></i><span>已退回</span><!--]--></div><div class="vs-filter-item"><!--[--><i class="el-icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path><path fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"></path></svg><!--]--></i><span>已完成</span><!--]--></div><!--]--></div><!--]--></div></div><!--[--><div class="el-scrollbar__bar is-horizontal" style="display:none;"><div class="el-scrollbar__thumb" style="width:;transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical" style="display:none;"><div class="el-scrollbar__thumb" style="height:;transform:translateY(0%);"></div></div><!--]--></div></div><div class="vs-filter-group"><div class="vs-filter-group-title"><span>多选 ：</span></div><!----><div class="el-scrollbar"><div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style=""><div class="el-scrollbar__view" style=""><!--[--><div class="vs-filter-content"><!--[--><div class="vs-filter-item"><!--[--><!----><span>全部</span><!--]--></div><div class="vs-filter-item active"><!--[--><!----><span>食品类</span><!--]--></div><div class="vs-filter-item"><!--[--><!----><span>服装类</span><!--]--></div><div class="vs-filter-item active"><!--[--><!----><span>家具类</span><!--]--></div><div class="vs-filter-item"><!--[--><!----><span>日用品类</span><!--]--></div><!--]--></div><!--]--></div></div><!--[--><div class="el-scrollbar__bar is-horizontal" style="display:none;"><div class="el-scrollbar__thumb" style="width:;transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical" style="display:none;"><div class="el-scrollbar__thumb" style="height:;transform:translateY(0%);"></div></div><!--]--></div></div><!--]--></div><span class="result">返回值: {
  &quot;single&quot;: &quot;1&quot;,
  &quot;multiple&quot;: [
    &quot;1&quot;,
    &quot;3&quot;
  ]
}</span><!--]--><!--]--></div><div class="mdp-demo__toolbar"><div class="mdp-demo__btn mdp-demo__btn-copy"><svg xmlns="http://www.w3.org/2000/svg" fill="none" height="20" width="20" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"></path></svg></div><div class="mdp-demo__btn mdp-demo__btn-code"><svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="46" d="M160 368L32 256l128-112M352 368l128-112-128-112M304 96l-96 320"></path></svg></div></div><div class="mdp-demo__code" style="height:0px;visibility:hidden;"><div><!--[--><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">vs-filter</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">filterData</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default-values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">filterResult</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">changeFilter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;result&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;返回值: {{ filterResult }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;selectFilter&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> filterResult</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ single: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, multiple: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> changeFilter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">val</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> filterResult.value) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  filterResult.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> val;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> filterData</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;单选&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;single&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    options: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;全部&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;已下单&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ShoppingCart&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;已发货&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Van&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;已签收&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Edit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;已退回&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Guide&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;已完成&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CircleCheck&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;多选&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;multiple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    multiple: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    options: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;全部&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;食品类&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;服装类&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;家具类&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;日用品类&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br></div></div><!--]--></div></div></div><h2 id="api" tabindex="-1">api <a class="header-anchor" href="#api" aria-label="Permalink to &quot;api&quot;">​</a></h2><h3 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to &quot;属性&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性名</th><th>类型</th><th>必传</th><th>默认值</th><th>属性描述</th></tr></thead><tbody><tr><td>data</td><td><a href="#selectdataprops">SelectDataProps</a>[ ]</td><td>✅</td><td>-</td><td>需要筛选的数据列表</td></tr><tr><td>default-values</td><td><code>object</code></td><td>❌</td><td>-</td><td>默认选中的值</td></tr></tbody></table><h3 id="events-​" tabindex="-1">Events <a href="#events">​</a> <a class="header-anchor" href="#events-​" aria-label="Permalink to &quot;Events [​](#events)&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>说明</th><th>类型</th></tr></thead><tbody><tr><td>change</td><td>选中的数据改变方法，返回选中的数据</td><td>Function</td></tr></tbody></table><h2 id="类型声明" tabindex="-1">类型声明 <a class="header-anchor" href="#类型声明" aria-label="Permalink to &quot;类型声明&quot;">​</a></h2><h3 id="selectdataprops" tabindex="-1">SelectDataProps <a class="header-anchor" href="#selectdataprops" aria-label="Permalink to &quot;SelectDataProps&quot;">​</a></h3><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectDataProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 列表标题</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 当前筛选项 key 值</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  multiple</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 是否为多选</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OptionsProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 筛选数据</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OptionsProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-beb5ee4a data-v-3565542b><!--[--><!--]--><div class="edit-info" data-v-3565542b><!----><div class="last-updated" data-v-3565542b><p class="VPLastUpdated" data-v-3565542b data-v-e6c1468a>更新时间: <time datetime="2024-11-07T09:50:27.000Z" data-v-e6c1468a></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-3565542b><span class="visually-hidden" id="doc-footer-aria-label" data-v-3565542b>Pager</span><div class="pager" data-v-3565542b><a class="VPLink link pager-link prev" href="/vue-desktop-docs/components/trend.html" data-v-3565542b><!--[--><span class="desc" data-v-3565542b>Previous page</span><span class="title" data-v-3565542b>Trend - 趋势</span><!--]--></a></div><div class="pager" data-v-3565542b><a class="VPLink link pager-link next" href="/vue-desktop-docs/components/flow.html" data-v-3565542b><!--[--><span class="desc" data-v-3565542b>Next page</span><span class="title" data-v-3565542b>Flow - 流程图</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_dot_index.md\":\"CQZKc12W\",\"components_filter.md\":\"C3ZW7Bb0\",\"components_flow.md\":\"BWFOOU2z\",\"components_grid_index.md\":\"CfQS4Kh9\",\"components_index.md\":\"BEHd_uve\",\"components_query.md\":\"B5f2NCyW\",\"components_table-select_index.md\":\"FYGUA5sq\",\"components_table_index.md\":\"Clyvrf1v\",\"components_tree.md\":\"BWQzmPZr\",\"components_trend.md\":\"2bJZvXuc\",\"components_upload.md\":\"D18lfnMj\",\"components_wizard.md\":\"CNypuv-t\",\"directives_index.md\":\"DQJEUmpU\",\"directives_v-copy.md\":\"9Y1U7-bO\",\"directives_v-countdown.md\":\"CcEu94Tn\",\"directives_v-debounce.md\":\"CilW_nu_\",\"directives_v-longpress.md\":\"CZXUvyFD\",\"directives_v-throttle.md\":\"DP1jdBqx\",\"directives_v-time.md\":\"BTkCWdRm\",\"directives_v-watermarker.md\":\"BPEZYyv0\",\"guide_index.md\":\"CzPHXAuN\",\"guide_layout.md\":\"OZCi1Pg6\",\"guide_router.md\":\"BeLNCxyF\",\"guide_theme.md\":\"Rq8N6XUV\",\"guide_todo.md\":\"C6nxd0Dx\",\"index.md\":\"B-8QW4hV\",\"utils_aes.md\":\"BF8TN9u9\",\"utils_http.md\":\"BO45rEB7\",\"utils_index.md\":\"CEOoMzTB\",\"utils_local.md\":\"vKg1EF4c\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue Studio\",\"description\":\"vue3 component、directive and template\",\"base\":\"/vue-desktop-docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"lastUpdated\":{\"text\":\"更新时间\",\"formatOptions\":{\"dateStyle\":\"medium\",\"timeStyle\":\"medium\"}},\"outline\":\"deep\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"组件\",\"link\":\"/components/\"},{\"text\":\"指令\",\"link\":\"/directives/\"},{\"text\":\"utils\",\"link\":\"/utils/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"介绍\",\"link\":\"/guide/index\"},{\"text\":\"关于布局\",\"link\":\"/guide/layout\"},{\"text\":\"路由和菜单\",\"link\":\"/guide/router\"},{\"text\":\"主题\",\"link\":\"/guide/theme\"}],\"/components/\":[{\"text\":\"介绍\",\"link\":\"/components/index\"},{\"text\":\"Grid - 网格\",\"link\":\"/components/grid/\"},{\"text\":\"Query - 查询器\",\"link\":\"/components/query\"},{\"text\":\"Table - 表格\",\"link\":\"/components/table/\"},{\"text\":\"TableSelect - 表格选择器\",\"link\":\"/components/table-select/\"},{\"text\":\"Tree - 树\",\"link\":\"/components/tree\"},{\"text\":\"Trend - 趋势\",\"link\":\"/components/trend\"},{\"text\":\"Filter - 分类筛选器\",\"link\":\"/components/filter\"},{\"text\":\"Flow - 流程图\",\"link\":\"/components/flow\"},{\"text\":\"Dot - 圆点\",\"link\":\"/components/dot/\"},{\"text\":\"Wizard - 场景向导\",\"link\":\"/components/wizard\"},{\"text\":\"Upload - 附件上传（开发中）\",\"link\":\"/components/upload\"}],\"/directives/\":[{\"text\":\"介绍\",\"link\":\"/directives/index\"},{\"text\":\"v-copy - 复制\",\"link\":\"/directives/v-copy\"},{\"text\":\"v-countdown - 倒数\",\"link\":\"/directives/v-countdown\"},{\"text\":\"v-debounce - 防抖\",\"link\":\"/directives/v-debounce\"},{\"text\":\"v-throttle - 节流\",\"link\":\"/directives/v-throttle\"},{\"text\":\"v-longpress - 长按\",\"link\":\"/directives/v-longpress\"},{\"text\":\"v-time - 时间转换\",\"link\":\"/directives/v-time\"},{\"text\":\"v-waterMarker - 水印\",\"link\":\"/directives/v-waterMarker\"}],\"/utils/\":[{\"text\":\"介绍\",\"link\":\"/utils/index\"},{\"text\":\"http - 请求\",\"link\":\"/utils/http\"},{\"text\":\"local - 本地存储\",\"link\":\"/utils/local\"},{\"text\":\"AES - 加解密\",\"link\":\"/utils/aes\"}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>